<style>
    .profile-avatar-container {
        position: relative;
        width: 100px;
        margin: 0 auto;
    }

    .profile-avatar-container .profile-user-img {
        width: 100px;
        height: 100px;
    }

    .profile-avatar-container .profile-avatar-text {
        display: none;
    }

    .profile-avatar-container:hover .profile-avatar-text {
        display: block;
        position: absolute;
        height: 100px;
        width: 100px;
        background: #444;
        opacity: .6;
        color: #fff;
        top: 0;
        left: 0;
        line-height: 100px;
        text-align: center;
    }

    .profile-avatar-container button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
    }
    .ml{border: 1px solid #ffffff;margin: 25px 0;}

    .pd-10{padding: 10px 0;}

    .tab-pane{
        min-width: 1000px;
    }

    .title {
        font-size: 16px;
    }

    .config {
        width: 100%;
        display: grid;
        grid-gap: 15px 30px;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(2,1fr);
    }

    .language {
        margin-bottom: 5px;
    }

    .language>.language_cell {
        display: inline-block;
        border: 1px solid silver;
        border-radius: 3px;
        padding: 5px 15px;
        cursor: pointer;
    }

    .language>.language_cell.active {
        color: rgba(24,188,156,1);
        background: rgba(24,188,156,.3);
        border-color: rgba(24,188,156,1)
    }

    .language>.language_cell:not(.active):hover {
        background: rgba(240,188,156,.3);
    }

    .language>.language_cell:nth-child(n+2) {
        margin-left: 5px;
    }

    .border {
        border: 1px solid silver;
        padding: 10px;
    }

    .field_form,
    .field_form2,
    .field_form3,
    .field_form4 {
        display: none;
    }

    .field_form.active,
    .field_form2.active,
    .field_form3.active,
    .field_form4.active {
        display: block;
    }

    .field_form>.btn_bar,
    .field_form2>.btn_bar,
    .field_form3>.btn_bar,
    .field_form4>.btn_bar {
        font-size: 18px;
    }

    .field_form>.btn_bar>button,
    .field_form2>.btn_bar>button,
    .field_form3>.btn_bar>button,
    .field_form4>.btn_bar>button {
        margin-left: 5px;
    }

    .field_form>.field_group:not(:last-child)::after,
    .field_form3>.field_group:not(:last-child)::after,
    .field_form3>.field_group>.field_data>.field_group2:not(:last-child)::after,
    .field_form4>.field_group:not(:last-child)::after {
        content: '';
        width: 100%;
        height: 1px;
        background: rgba(10,10,10,.1);
        display: inline-block;
        margin: 15px 0 10px;
    }

    .field_form>.field_group>.field_type,
    .field_form>.field_group>.field_list>.field_cell,
    .field_form2>.field_list>.field_cell,
    .field_form3>.field_group>.field_title,
    .field_form3>.field_group>.field_data>.field_group2>.field_type,
    .field_form3>.field_group>.field_data>.field_group2>.field_list>.field_cell,
    .field_form4>.field_group>.field_list,
    .field_form4>.field_title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .field_form>.field_group>.field_type>.field_label,
    .field_form3>.field_group>.field_title>.field_label,
    .field_form3>.field_group>.field_data>.field_group2>.field_type>.field_label,
    .field_form4>.field_title>.field_cell>.field_label {
        font-weight: bold;
    }

    .field_form3>.field_group>.field_data>.field_group2>.field_list>.field_cell>.field_label:first-child {
        margin-right: 10px;
    }

    .field_form>.field_group>.field_type>.field_input,
    .field_form3>.field_group>.field_data>.field_group2>.field_type>.field_input {
        font-size: 16px;
        border: 1px solid gray;
        outline: none;
        padding: 2px 5px;
        margin: 0 15px 0 10px;
    }

    .field_form>.field_group>.field_type>button,
    .field_form3>.field_group>.field_title>button,
    .field_form3>.field_group>.field_data>.field_group2>.field_type>button {
        margin-right: 10px;
    }

    .field_form>.field_group>.field_list,
    .field_form2>.field_list,
    .field_form3>.field_group>.field_data>.field_group2>.field_list,
    .field_form4>.field_group {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: flex-start;
    }

    .field_form>.field_group>.field_list,
    .field_form2>.field_list,
    .field_form3>.field_group>.field_data,
    .field_form3>.field_group>.field_data>.field_group2>.field_list {
        margin-top: 5px;
    }

    .field_form>.field_group>.field_list>.field_cell:not(:last-child),
    .field_form2>.field_list>.field_cell:not(:last-child),
    .field_form3>.field_group>.field_data>.field_group2>.field_list>.field_cell:not(:last-child) {
        margin-bottom: 5px;
    }

    .field_form>.field_group>.field_list>.field_cell>.field_label,
    .field_form2>.field_list>.field_cell>.field_label,
    .field_form3>.field_group>.field_data>.field_group2>.field_list>.field_cell>.field_label {
        font-weight: bold;
    }

    .field_form3>.field_group>.field_data>.field_group2>.field_list>.field_cell>.field_label:nth-child(2) {
        margin-right: 5px;
    }

    .field_form>.field_group>.field_list>.field_cell>.field_input,
    .field_form2>.field_list>.field_cell>.field_input,
    .field_form3>.field_group>.field_data>.field_group2>.field_list>.field_cell>.field_input {
        width: 300px;
        font-size: 16px;
        border: 1px solid gray;
        outline: none;
        padding: 2px 5px;
        margin: 0 15px 0 10px;
    }

    .field_form>.field_group>.field_list>.field_cell>.field_select,
    .field_form3>.field_group>.field_title>.field_select,
    .field_form3>.field_group>.field_data>.field_group2>.field_type>.field_select {
        width: 140px;
        font-size: 16px;
        border: 1px solid gray;
        outline: none;
        padding: 2px 5px;
        margin: 0 15px 0 10px;
    }

    .field_form3>.field_group>.field_data>.field_group2>.field_type>.field_text {
        width: 400px;
        font-size: 16px;
        border: 1px solid gray;
        outline: none;
        padding: 2px 5px;
        margin: 0 15px 0 10px;
    }

    .field_form4>.field_title {
        padding-bottom: 10px;
    }

    .field_form4>.field_title>.field_cell {
        font-size: 16px;
    }

    .field_form4>.field_title>.field_cell,
    .field_form4>.field_group>.field_list>.field_cell {
        margin-right: 10px;
    }

    .field_form4>.field_title>.field_cell:nth-child(-n+3),
    .field_form4>.field_group>.field_list>.field_cell:nth-child(-n+3)>div {
        width: 160px;
    }

    .field_form4>.field_title>.field_cell:last-child,
    .field_form4>.field_group>.field_list>.field_cell:nth-child(4)>div {
        width: 400px;
    }

</style>
<div class="row animated fadeInRight">

    <div class="col-md-12">
        <div class="panel panel-default panel-intro panel-nav">
            <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#one" data-toggle="tab"><i class="fa fa-pencil-square"></i> {:__('Privacy Setting')}</a></li>
                    <li class=""><a href="#five" data-toggle="tab"><i class="fa fa-file-photo-o"></i> {:__('Banner Setting')}</a></li> 
                </ul>
            </div>
            <div class="panel-body">
                <div id="myTabContent" class="tab-content">

                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">

                            <!-- <div class="panel-body col-xs-12 col-sm-6"> -->
                                <form id="update-form" role="form" data-toggle="validator" method="POST" action="{:url('savePrivacy')}">
                                    <!-- <div class="box-body box-profile"> -->

                                        <div class="form-group">
                                            <label class="control-label">{:__('Open service')}:</label>
                                            {:build_radios('privacy[terms_of_service][on]', ['1'=>__('Open'), '0'=>__('Close')],$privacy['terms_of_service']['on'])}
                                            <div>
                                                <p>{:__('Service title')}</p>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="control-label">{:__('Content of terms')}:</label>
                                            <textarea name="privacy[terms_of_service][content]" id="serviceinfo" cols="60" rows="5" class="form-control editor">{$privacy['terms_of_service']['content']}</textarea>
                                        </div>

                                        <div class="ml"></div>

                                        <div class="form-group">
                                            <label class="control-label">{:__('Open privacy')}:</label>
                                            {:build_radios('privacy[privacy_policy][on]', ['1'=>__('Open'), '0'=>__('Close')],$privacy['privacy_policy']['on'])}
                                            <div>
                                                <p>{:__('Privacy title')}</p>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="control-label">{:__('Privacy of terms')}:</label>
                                            <textarea name="privacy[privacy_policy][content]" id="privacyinfo" cols="60" rows="5" class="form-control editor">{$privacy['privacy_policy']['content']}</textarea>
                                        </div>

                                        <div class="form-group">
                                            <button type="submit" class="btn btn-success">{:__('Submit')}</button>
                                            <button type="reset" class="btn btn-default">{:__('Reset')}</button>
                                        </div>
                                    <!-- </div> -->
                                </form>
                            <!-- </div> -->

                        </div>
                    </div>
                  
                    <div class="tab-pane fade" id="five">
                        <div class="widget-body no-padding">

                            <!-- <div class="panel-body col-xs-12 col-sm-6"> -->
                                <form id="banner" role="form" data-toggle="validator" method="POST" action="{:url('saveBanner')}">
                                    <!-- <div class="box-body box-profile"> -->

                                        <div class="form-group">
                                            <span class="btn btn-success add_banner" style="float: right;">{:__('add')}</span>
                                            <label for="openwithdrawal" class="control-label">{:__('Carousel Setting')}</label>
                                            <div><p>{:__('Carousel title')}</p></div>
                                        </div>

                                        {volist name="banner" id="b"}
                                        <div class="form-group" sort="{$key + 1}">
                                            <label for="c-banner{$key}" class="control-label">{:__('Carousel img')}{$key + 1}:</label>
                                            <input name="banner[{$key}][id]" type="hidden" value="{$b.id}">
                                            <div class="input-group">
                                                <input id="c-banner{$key}" data-rule="" class="form-control" size="50" name="banner[{$key}][url]" type="text" value="{$b.url}">
                                                <div class="input-group-addon no-border no-padding">
                                                    <span>
                                                        <button type="button" id="faupload-banner{$key}" class="btn btn-danger faupload" data-input-id="c-banner{$key}" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-banner{$key}"><i class="fa fa-upload"></i> {:__('Upload')}</button>
                                                    </span>
                                                    <span>
                                                        <button type="button" id="fachoose-banner{$key}" class="btn btn-primary fachoose" data-input-id="c-banner{$key}" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button>
                                                    </span>
                                                </div>
                                                <span class="msg-box n-right" for="c-banner{$key}"></span>
                                            </div>
                                            <ul class="row list-inline faupload-preview" id="p-banner{$key}"></ul>

                                            <div class="pd-10">{:__('Tips')}</div>
                                            <div class="form-group">
                                                <label class="control-label">{:__('Url')}</label>
                                                <input class="form-control" name="banner[{$key}][item_url]" type="text" value="{$b.item_url}" placeholder="{:__('bannerUrl')}">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">{:__('Sort')}</label>
                                                <input class="form-control" name="banner[{$key}][sort]" type="text" value="{$b.sort}" placeholder="{:__('bannerSort')}">
                                            </div>
                                        </div>
                                        <div class="ml"></div>
                                        {/volist}

                                        <div class="form-group">
                                            <button type="submit" class="btn btn-success">{:__('Submit')}</button>
                                            <button type="reset" class="btn btn-default">{:__('Reset')}</button>
                                        </div>
                                    <!-- </div> -->
                                </form>
                            <!-- </div> -->

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
